

/**
 * @class Ext.for.HUD
 * @extends Ext.FormPanel
 * A special HUD panel.
 */
Ext.form.HUD = function(config) {
	var config = config || {};

	Ext.applyIf(config, {
				baseCls		: 'x-hud',
				width		: 220,
				defaults	: {
					border		: false,
					bodyStyle	: 'background:transparent'
				}
			});

	Ext.form.HUD.superclass.constructor.call(this, config);

	this.addEvents(
			/**
	 * @event save
	 * Fires when the save button is clicked
	 * @param {Ext.form.FormPanel} this The form panel which fired the event
	 */
			'save',

			/**
			 * @event cancel
			 * Fires after the panel has been hidden.  Note that the data are still available in 
			 * the form - it is just hidden
			 * @param {Kohive.views.hives.New} this
			 */
			'cancel'
	);

	this.on('show', this.addClickListenerToBody, this);
	this.on('hide', this.removeClickListenerToBody, this);
};

Ext.extend(Ext.form.HUD, Ext.FormPanel, {
			/**
			 * @property saving
			 * Set to true while saving, stops window from being closed while a save is in progress
			 */
			saving						: false,

			/**
			 * Renders the HTML for this component
			 * @param {Ext.Container} ct The container to render this component to
			 * @param {Number} position The position within the parent container to render this component to
			 */
			onRender					: function(ct, position) {
				var ct = ct || Ext.getBody();

				// Create the HUD
				this.el = ct.createChild({
							cls	: this.baseCls + '-wrapper'
						});

				if (this.initialConfig.header === false)
					this.el.addClass('no-header');

				Ext.form.HUD.superclass.onRender.apply(this, arguments);
			},

			// private
			initEvents					: function() {
				Ext.form.HUD.superclass.initEvents.apply(this, arguments);

				// Get the elements within the HUD
				this.bodyEl = this.el.child('.' + this.baseCls + '-body');

				// Set the height of the body to auto
				this.bodyEl.setHeight('auto');

				// Focus on the form
				this.focus();

				// Create the poker and anchor it
				this.pokerEl = this.createPoker();
			},

			/**
			 * Shows the HUD and positions it
			 * @param {Array} offset The offset
			 * @param {String} position Something like 'b-t'
			 */
			showHUD						: function(offset, position) {
				var tempTask = new Ext.util.DelayedTask(function() {

							this.show();
							this.positionHUD(offset || null, position || null);
						}, this);
				tempTask.delay(200);
			},

			/**
			 * Method which positions the HUD accordingly
			 * @param {Array} offset The offset
			 * @param {String} position Something like 'b-t'
			 */
			positionHUD					: function(offset, position) {
				var offset = offset || [0, 0];
				var position = position || 'b-t';

				this.el.setHeight(this.el.getHeight()
						- this.pokerEl.getHeight());

				// Anchor the HUD to the hivePanel
				this.el.anchorTo(this.anchorToEl, position, offset);

				this.currentOffset = offset;

				// Get the correct poker position
				var pokerPosition = "t-b";
				var pokerOffset = [0, 0];
				if (position == "b-t") {
					pokerPosition = "t-b";
				};

				// Position the poker
				this.positionPoker(pokerOffset, pokerPosition);

				this.checkBoundaires();

				var obj = this;
				jQuery(window).bind('resize', function() {
							obj.checkBoundaires();
						});
			},

			/**
			 * Checks if the HUD is out of view
			 */
			checkBoundaires				: function() {
				// Check if the HUD is out of bounds
				if (this.el.getWidth() + this.el.getX() > Ext.getBody()
						.getWidth()) {
					this.moveToRight();
				};
			},

			/**
			 * Moves the HUD over to the right for the member/hive panel
			 */
			moveToRight					: function() {
				var pokerPosition = "tr-br";
				var pokerOffset = [-10, 0];

				this.positionPoker(pokerOffset, pokerPosition, true);

				this.el.anchorTo(this.anchorToEl, 'br-tr', [
								this.currentOffset[0] - 5,
								this.currentOffset[1]]);
			},

			/**
			 * Adds a click listener to the Ext.getBody element so when the user clicks out
			 * of the HUD it closes.
			 */
			addClickListenerToBody		: function() {
				// Listener for body to check if the user clicks
				Ext.getBody().on('mousedown', function(e) {
							if (!e.getTarget('.x-hud-wrapper') && !this.saving) {
								this.destroy();
							};
						}, this
				);
			},

			/**
			 * Updates save button text and disables it while saving
			 */
			startSave					: function() {
				this.disable();
				this.saving = true;

				// Find the form mask and create a loading animation child within it
				var mask = this.el.child('.ext-el-mask');
				if (mask) {
					mask.setHeight(this.el.getHeight() - 25);
					mask.setWidth(this.el.getWidth() - 3);
					mask.anchorTo(this.el, 'b-b', [1, -1]);

					this.loadingContainer = mask.createChild({
								cls	: 'x-loading'
							});

					this.loadingContainer.anchorTo(mask, 'c-c', [0, -3]);
				};
			},

			/**
			 * Re-enables button and resets text back to normal submit text
			 */
			endSave						: function() {
				if (this.loadingContainer) {
					this.loadingContainer.remove();
				};

				this.enable();
				this.saving = false;
			},

			/**
			 * Method which is called when the form is successfully submitted
			 */
			onSuccess					: function() {
				this.form.reset();
				this.destroy();
			},

			/**
			 * Marks the appropriate errors on the panel
			 * @param {Kohive.models.Hive} hive The hive model instance containing the errors 
			 */
			onFailure					: function(hive) {
				this.form.clearInvalid();
				this.form.markInvalid(hive.errors.forForm());
			},

			/**
			 * Creates the poker element
			 * @return {Ext.Element} The new poker
			 */
			createPoker					: function() {
				var ct = Ext.getBody();

				var poker = this.el.createChild({
							cls	: 'x-hud-poker'
						});

				poker.setWidth(15);
				poker.setHeight(this.initialConfig.pokerHeight || 15);

				return poker;
			},

			/**
			 * Creates the little sharp frakker at the bottom of the HUD
			 * @param {Array} offset The offset
			 * @param {String} position The position of where the poker should be. t-b/tr-br
			 */
			positionPoker				: function(offset, position, right) {
				if (!this.pokerEl) {
					return;
				};

				this.pokerEl.anchorTo(this.el, position || 't-b', offset
								|| [0, -5]);
			},

			/**
			 * Adds a click listener to the Ext.getBody element so when the user clicks out
			 * of the HUD it closes.
			 */
			addClickListenerToBody		: function() {
				// Listener for body to check if the user clicks
				Ext.getBody().on('mousedown', this.clickListener, this);
			},

			/**
			 * Removes the click listener from the body
			 */
			removeClickListenerToBody	: function() {
				Ext.getBody().un('mousedown', this.clickListener, this);
			},

			/**
			 * Method for the click listener on the body
			 */
			clickListener				: function(e) {
				if (!e.getTarget('.x-hud-wrapper')) {
					this.destroy();
				};
			}
		}
);
Ext.reg('hud', Ext.form.HUD);